</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">CandlestickChart for ASP.NET Web Forms</div> <div id="PageTitle"><div id="PageTitleText">Creating a Candlestick Chart</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> <a href="Candlestick Chart Types.html">Candlestick Chart Types</a> > Creating a Candlestick Chart</td></tr></table></div> <div id="BodyContent"> <p>There are two ways to create a Candlestick chart: at design time or in Source View. This topic assumes that you have added the appropriate references and a <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Chart.C1CandlestickChart.html">C1CandlestickChart</a> control to your new application. The "Candlestick" type chart is the default chart type.</p> <p> </p> <p class="Caption">At Design Time</p> <ol> <li>Select the <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Chart.C1CandlestickChart.html">C1CandlestickChart</a> control to open the control's Properties window.</li> <li>Locate the <strong>Type</strong> property in the <strong>Appearance</strong> properties.</li> <li>Check the type to make sure "Candlestick" is selected. This is the default chart type, so it should be selected automatically. </li> <li>Add SeriesList data as in <a href="Step_2_of_4-_Adding_a_SeriesList_to_the_Candlestick_Chart.html">Step 2 of the Quick Start</a>. For a Candlestick chart, you need High, Low, Open, Close and X values.</li> <li>Customize your chart using the <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1Chart.ChartStyle.html">ChartStyle</a> options.</li> <li>Run your application.</li> </ol> <p class="Caption">In Source View</p> <p>The following markup can be used to create and customize a Candlestick chart in Source View. Note that the color and width of the chart elements has been set:</p> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>Markup</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <cc1:C1CandlestickChart ID=<span style="COLOR: #800000">"C1CandlestickChart1"</span> runat=<span style="COLOR: #800000">"server"</span> Type=<span style="COLOR: #800000">"Candlestick"</span>> <CandlestickChartSeriesStyles> <cc1:CandlestickChartStyle> <HighLow Fill-Color=<span style="COLOR: #800000">"#ff9900"</span> Width=<span style="COLOR: #800000">"2"</span>></HighLow> <FallingClose Fill-Color=<span style="COLOR: #800000">"#ff0000"</span> Width=<span style="COLOR: #800000">"6"</span>></FallingClose> <RaisingClose Fill-Color=<span style="COLOR: #800000">"#ff9900"</span> Width=<span style="COLOR: #800000">"6"</span>></RaisingClose> </cc1CandlestickChartStyle> </CandlestickChartSeriesStyles> <SeriesList> <cc1:CandlestickChartSeries LegendEntry=<span style="COLOR: #800000">"True"</span> Label=<span style="COLOR: #800000">"Values"</span>> <Data> <High DoubleValues=<span style="COLOR: #800000">"10, 12, 11, 14, 16, 20, 18, 17"</span> /> <Low DoubleValues=<span style="COLOR: #800000">"7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10"</span> /> <Open DoubleValues=<span style="COLOR: #800000">"8,8.6,11,6.2,13.8,15,14,12"</span>></Open> <Close DoubleValues=<span style="COLOR: #800000">"8.6,11,6.2,13.8,15,14,12,10"</span>></Close> <X> <Values> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-07"</span> /> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-08"</span> /> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-09"</span> /> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-10"</span> /> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-11"</span> /> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-12"</span> /> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-13"</span> /> <cc1:ChartXData DateTimeValue=<span style="COLOR: #800000">"2014-03-14"</span> /> </Values> </X> </Data> </cc1CandlestickChartSeries> </SeriesList> </cc1C1CandlestickChart> </pre> </td> </tr> </tbody> </table> </div> <a name="seealsobookmark"></a> <div class="SectionHeading" id="seealsoSectionHeading"><span class="SectionHeadingIcon"><!-- --></span><span class="SectionHeadingText">See Also</span></div><div id="seealsoSectionContent" class="SectionContent"><div class="SeeAlsoLink"> <a href="Design-Time_Support.html">Design-Time Support</a></div> </div> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script> $(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } }); </script></p> <a href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> | <a href="http://feedback.componentone.com/forums/255768-asp-net-documentation" target="_blank">Documentation Feedback</a> </div> </body> </html>